<template>
    <div id="merchantReview">
        <h3>您好，欢迎进入商户审核界面</h3>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商户审核</el-breadcrumb-item>
        </el-breadcrumb>
        <br>

        <!--查询表单-->
        <el-form :inline="true" :model="merchantObj">
            <el-form-item label="昵称:">
                <el-input placeholder="请输入昵称关键字" v-model="merchantObj.name">
                </el-input>
            </el-form-item>

            <el-form-item label="门店名称:">
                <el-input placeholder="请输入门店关键字" v-model="merchantObj.shopName">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="selBtn">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="merchantAry" style="width: 100%">
            <el-table-column
                prop="merchantId"
                label="商户编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="商户真实姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号码"
                width="180">
            </el-table-column>
            <el-table-column
                prop="shopName"
                label="门店名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="门店地址"
                width="180">
            </el-table-column>
            <el-table-column
                prop="checkTag"
                label="审核状态"
                width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.checkTag=='S001-1'">等待审核</span>
                    <span v-if="scope.row.checkTag=='S001-2'">审核不通过</span>
                    <span v-if="scope.row.checkTag=='S001-3'">审核通过</span>
                </template>
            </el-table-column>
            <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="success"
                        round
                        icon="el-icon-edit"
                        @click="checkMer(scope.row)" plain>审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="pageSizeList"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 复核对话框 -->
        <el-dialog title="修改商户信息" :visible.sync="checkVisible">
            <el-form ref="form" :model="merchantObj1" label-width="200px">
                <el-form-item label="商户编号" >
                    <el-input v-model="merchantObj1.merchantId"></el-input>
                </el-form-item>
                <el-form-item label="关联前台编号" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.consumerId"></el-input>
                </el-form-item>
                <el-form-item label="账户余额" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.balance"></el-input>
                </el-form-item>
                <el-form-item label="身份证" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.idCard"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.phone"></el-input>
                </el-form-item>
                <el-form-item label="门店照片" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.shopImg"></el-input>
                </el-form-item>
                <el-form-item label="门店名称" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.shopName"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.detailAddress">
                    </el-input>
                </el-form-item>
                <el-form-item label="是否营业" :label-width="formLabelWidth">
                    <el-select v-model="merchantObj1.onOff" slot-scope="scope">
                        <el-option v-if="scope.row.onOff=='1'">是</el-option>
                        <el-option v-if="scope.row.onOff=='0'">否</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请时间" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="merchantObj1.createDate"
                        type="datetime"
                        placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="审核人" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.checker"></el-input>
                </el-form-item>
                <el-form-item label="审核时间" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="merchantObj1.checkerTime"
                        type="datetime"
                        placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="审核理由" :label-width="formLabelWidth">
                    <el-input v-model="merchantObj1.checkReason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary"  @click="checkNoOk">审核不通过</el-button>
                <el-button type="primary" @click="checkOk">审核</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
export default {
    name: "MerchantReview",
    data() {
        return {
            merchantObj1:{
            },
            merchantAry: {
                companyName:null,
                name:null,
            },
            // 当前页号
            pageNo: 1,
            // 当前页大小
            pageSize: 5,
            // 总记录数
            total: 0,
            // 页大小列表
            pageSizeList: [2, 5, 10, 20],
            // 查询条件对象
            merchant: {},
            checkVisible:false,
            merchantObj: {
                name: "",
                shopName: "",
            },
        }
    },
    methods: {
        // 表单查询
        merchant() {
            // 查询
            this.pageNo = 1
            this.merchantPage()
        },
        // 页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.merchantPage()
        },
        // 页号改变
        handleCurrentChange(val) {
            this.pageNo = val
            // 重新查询
            this.merchantPage()
        },
        //分页查询所有未审核的信息
        async merchantPage() {
            // 用es6的解构函数
            const {data: res} = await this.$http.post
            (`/community/merchant/merchantPage/${this.pageNo}/${this.pageSize}`, this.merchantObj)
            console.log('res', res)
            this.merchantAry = res.rows
            this.total = res.total
        },
        async checkMer(rows){
            //显示对话框
            this.checkVisible = true
            this.merchantObj1=rows
        },
        //复核成功
        async checkOk(){
            const {data: res}=await this.$http.post(`/community/merchant/merchantFuHeOk`,this.merchantObj1)
            //拿用户id
            this.id=this.merchantObj1.consumerId
            console.log(this.id)
            const {data: resw}=await this.$http.post(`/community/consumer/merchantById/${this.id}`)
            //关闭对话框
            this.checkVisible = false
            // 消息提示
            this.$message('复核成功')
            // 刷新表格
            this.merchantPage()
        },
        //复核失败
        async checkNoOk(){
            const {data: res}=await this.$http.post(`/community/merchant/merchantFuHeNoOk`,this.merchantObj1)
            //关闭对话框
            this.checkVisible = false
            // 消息提示
            this.$message('复核不通过')
            // 刷新表格
            this.merchantPage()
        },
        selBtn() {
            this.merchantPage()
        },
    },
    mounted() {
        this.merchantPage()
    }
}
</script>

<style scoped>

</style>